<#include "../common/layoutWithOutDocType.ftl"/>
<@layoutWithOutDocType>


<table width="100%">
<tr>

<td width="60%" valign="top">
  <div class="well" style="height:800px">
  		<!--百度地图容器-->
  	<div id="container"></div>
  	<div id="results"></div>
<style type="text/css"> 
#container{height:100%}

  td {   font-size: 9pt;color=#3333FF;height:23pt;nowrap}

</style> 
<!--引用百度地图API-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=VVxB3u2hT9wlF2QfiHqu7zNx"></script>
<script type="text/javascript" src="/js/baiduMap/MarkerTool.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
<script type="text/javascript" src="/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="/js/checkArea.js"></script>
<script type="text/javascript" src="/js/jquery.spinner.js"></script>
<script type="text/javascript" src="/js/order_type.js"></script>
	
<script>
 var beginPoint ;
 var endPoint ;
 var map;
 var issubmit=false;
 var cityPostion = "${session.syscity!""}";
	 
	//创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
    }
    
    //创建地图函数：
    function createMap(){
        map = new BMap.Map("container");//在百度地图容器中创建一个地图
        //var point = new BMap.Point(121.488186,31.225696);//定义一个中心点坐标<上海>
        //map.centerAndZoom(point,12);//设定地图的中心点和坐标并将地图显示在地图容器中
        
        <#if session.syscity??>
            <#if session.syscity?length gt 0>
        		map.centerAndZoom("${session.syscity}", 12);
        	<#else>
            	map.centerAndZoom("上海", 12);
        	</#if>
        <#else>
            map.centerAndZoom("上海", 12);
        </#if>
        window.map = map;//将map变量存储在全局
    }
    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }
    
    //地图控件添加函数：
    function addMapControl(){
	    //向地图中添加缩放控件
		var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
		map.addControl(ctrl_nav);
	    //向地图中添加缩略图控件
		var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
		map.addControl(ctrl_ove);
	    //向地图中添加比例尺控件
		var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
		map.addControl(ctrl_sca);
    }
    
    initMap();

    function markBegin(){
	    var mkrTool = new BMapLib.MarkerTool(map,{followText: "点击地图添加标注"});
	    mkrTool.addEventListener("markend", function(evt){ 
		    beginPoint = evt.marker;
		    beginPoint.enableDragging(true); // 设置标注可拖拽
		    $("#startpoint_longitude").val(beginPoint.getPosition().lng);
			 $("#startpoint_latitude").val(beginPoint.getPosition().lat);
			 
		    beginPoint.addEventListener("dragend" , function(){
			     $("#startpoint_longitude").val(beginPoint.getPosition().lng);
			 	 $("#startpoint_latitude").val(beginPoint.getPosition().lat);
		    	  
			     var pt = beginPoint.getPosition();
			      
			     var gc = new BMap.Geocoder();
			     gc.getLocation(pt, function(rs){
				    var addComp = rs.addressComponents;
				    //$("#startpoint").val(addComp.district + addComp.street + addComp.streetNumber);
				    route();
				});  
		    })
		    //TODO
		    var gc = new BMap.Geocoder(); 
		    var pt = beginPoint.point; 

		   markerComplete(pt.lng,pt.lat);
		   
		     gc.getLocation(pt, function(rs){
			    var addComp = rs.addressComponents;
			    var  s=$("#startpoint").val();
			    //if(s.length==0)
			    	//$("#startpoint").val(addComp.district + addComp.street + addComp.streetNumber);
			});  
		});
	
	     mkrTool.open(); //打开工具 
	     var icon= new BMap.Icon('/img/marker/start.png', new BMap.Size(38, 33), {
    			imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
	  			}
			);
		 mkrTool.setIcon(icon);
		 $("#beginChooser").attr("disabled" , true);
		 
	 }
	 
	 function checkMobile(mobile)
	 {
		$.ajax({
		    type : "POST",
		    url : "/member/findByPhone",
		    dataType : "json",
		     data: {'phone':mobile},
		    success : function(data) {
			    if(data.member)
			    {
			    	
			    	$("#clientPhone").val(data.member.cell_phone);
			    	$("#clientName").val(data.member.real_name);
			    	$("#memberID").val(data.member.id);
			    	$("#clientVirtual").text(data.finishmoney+"元");
			    	
			    	if(data.member.sex==0)
			    	$("#membertype").html("男");
			    	if(data.member.sex==1)
			    	$("#membertype").html("女");
			    	if(data.member.sex==2)
			    	$("#membertype").html("未知");
			    	
			    	//$("#allcount").html(data.order_count);
			    	$("#allcount").html("<a target='_blank' href='/order/memberOrder/"+data.member.id+"'>"+data.order_count+"</a>");
			    	
			    	$("#cancalcount").html(data.cancel_order_count);
					$("#monthcount").html(data.month_order_count);
					$("#todayordernums_div").slideDown();
			    }
			    else
			    {
			    	$("#clientName").val("");
			    	$("#memberID").val("");
			    	$("#clientVirtual").text("0元");
			    	
			    	$("#membertype").html("未知");
					            
			    	$("#allcount").html("0");
	
			    	$("#cancalcount").html("0");
					$("#monthcount").html("0");
					$("#todayordernums_div").slideUp();
			    }
		    },
		    error : function(textStatus) {
		        //alert("出错");
		    }
		});
	 }
	 
	 
	//改变驾车路线回调
	function markerComplete(lng,lat){
		//附近司机
	    $.get('/driver/listdistance',{'longitude':lng,'latitude':lat},function(data,status){

	    	$(".drivers-tr").remove();
	    	if(status=="success"){
				if(data && data.length>0){
					$(data).each(function(i,driver){
						var content="<tr class='drivers-tr'>"+
									"<td><input type='checkbox' name='check_drivers' value='"+driver.id+"' /></td>"+
									"<td>"+driver.realname+"</td>"+
									"<td>"+driver.distance+"</td>"+
									"<td>"+driver.todayOrders+"次</td>"+
									"<td>"+driver.monthOrders+"次</td>"+
									"<tr>";
						$("#drivers-table tbody").append(content);
					});
				}
			}
			else
			{
				alert("查找附近司机失败");
			}
		});
	}	 
	
	 function markEnd(){
	    var mkrTool = new BMapLib.MarkerTool(map,{followText: "点击地图添加标注"});
	    mkrTool.addEventListener("markend", function(evt){ 
		    endPoint = evt.marker;
		    endPoint.enableDragging(true); // 设置标注可拖拽
		    $("#endpoint_longitude").val(endPoint.getPosition().lng);
			$("#endpoint_latitude").val(endPoint.getPosition().lat);
		    endPoint.addEventListener("dragend" , function(){
			     $("#endpoint_longitude").val(endPoint.getPosition().lng);
				 $("#endpoint_latitude").val(endPoint.getPosition().lat);
		    	 var gc = new BMap.Geocoder(); 
			     var pt = endPoint.point; 
			     gc.getLocation(pt, function(rs){
				    var addComp = rs.addressComponents;
				    //$("#endpoint").val(addComp.district + addComp.street + addComp.streetNumber);
				    route();
				});  
		    })
		    //alert(marker.getPosition().lng + " , " + marker.getPosition().lat);
		    var gc = new BMap.Geocoder(); 
		     var pt = endPoint.point; 
		     gc.getLocation(pt, function(rs){
			    var addComp = rs.addressComponents;
			    //$("#endpoint").val(addComp.district + addComp.street + addComp.streetNumber);
			    route();
			});  
		});
	     mkrTool.open(); //打开工具 
	     var icon= new BMap.Icon('/img/marker/end.png', new BMap.Size(38, 33), {
    			imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
	  			}
			);
		 mkrTool.setIcon(icon);
		 $("#endChooser").attr("disabled" , true);
	 }
	 
	 function route(){
	 	var output = "";
		var searchComplete = function (results){
		    if (transit.getStatus() != BMAP_STATUS_SUCCESS){
		        return ;
		    }
		   var plan = results.getPlan(0);
		   $("#kilometre_adv").text(plan.getDistance(true));
		}
		var transit = new BMap.DrivingRoute(map, {renderOptions: {map: map},
		    onSearchComplete: searchComplete,
		    onPolylinesSet: function(){        
		        setTimeout(function(){},"1000");
		    }});
		if(beginPoint && endPoint){
			transit.search(beginPoint.getPosition(), endPoint.getPosition());
		}
	 }
	 
	 function search(){
	 	var local = new BMap.LocalSearch(map, {
		  renderOptions: {map: map, panel: "results"}
		});
		
		local.search($("#startpoint").val());
	 }
	 
	 function searchEnd(){
	 	var local = new BMap.LocalSearch(map, {
		  renderOptions: {map: map, panel: "results"}
		});
		
		local.search($("#endpoint").val());
	 }
	 function dis(){
	 	  var myDis = new BMapLib.DistanceTool(map);
	 	  myDis.open();
	 }
	 
	 function formCheck(){
	 		if($("#startpoint_longitude").val().length==0 || $("#startpoint_latitude").val().length==0){
				alert("请先在地图上指定 定位代驾地点");
				return false;
			}
			var cPhone=$("#clientPhone").val();
			var isphone=/^1[3,5,8]\d{9}$/;
			if (cPhone.length!=11 || !isphone.test(cPhone)){
				//$.scojs_message("客户手机格式不正确", $.scojs_message.TYPE_ERROR);
				alert("客户手机格式不正确");
				return false;
			}
			
		 	if($("#clientName").val().length==0 ){
				//$.scojs_message("请先在地图上指定 定位代驾地点", $.scojs_message.TYPE_ERROR);
				alert("客户姓名不能为空");
				return false;
			}		

		 	if($("#startpoint").val().length==0 ){
				//$.scojs_message("请先在地图上指定 定位代驾地点", $.scojs_message.TYPE_ERROR);
				alert("出发地不能为空");
				return false;
			}			
			
			if($("#pointTime").val().length==0 ){
				alert("预约时间不能为空");
				return false;
			}
			if($("#driverNum").val().length==0){
				//$.scojs_message("人数不能为空", $.scojs_message.TYPE_ERROR);
				alert("人数不能为空");
				return false;
			}
			return true;
	}
</script>
  </div>
  </div>
</td>

<td width="1%" valign="top">
</td>
<td width="39%" valign="top">

	<form id="form1" class="form-horizontal " onsubmit="return formCheck();" action="/order/save3"  method="post" >
	
	<table width="100%" border="1" cellpadding="1" cellspacing="0"   style="border: 1px solid blue; ">
  <tr height="40">
    <td colspan="6" align="center" bgcolor="#e6e6e6">添加机场新订单
    		<input type="hidden" id="startpoint_longitude" name="order.startpoint_longitude" value="">
    		<input type="hidden" id="startpoint_latitude" name="order.startpoint_latitude" value="">
    		<input type="hidden" id="endpoint_longitude" name="order.endpoint_longitude" value="">
    		<input type="hidden" id="endpoint_latitude" name="order.endpoint_latitude" value="">
    </td>
  </tr>
  <tr height="40">
    <td align="left" valign="middle" bgcolor="#E6E6E6"><em>&nbsp;&nbsp;</em>订单类型</td>
    <td colspan="5" >
    	<select name="orderCategoryType" id="orderCategoryType" class="form-control" onchange="orderCategoryTypeChange(this)">
    		<#list session.orderTypeMapList as orderType>
    			<option value="${orderType.value}" <#if orderCategoryType == orderType.value >selected="selected"</#if>>${orderType.name}</option>
    		</#list>
    	</select>
    </td>
  </tr>
  <tr height="40">
    <td  align="left" valign="middle" bgcolor="#E6E6E6"><em>&nbsp;&nbsp;</em>算费规则</td>
    <td colspan="5" >
    	<select name="order.price_rule_id" id="order.price_rule_id" class="form-control">
    		<#list ruleList as rule>
    			<option value="${rule.id}" <#if rule.is_default == 1 >selected="selected"</#if>>${rule.name}</option>
    		</#list>
    	</select>
    </td>
  </tr>
  <tr height="20" bgcolor="#a6E3E6">
   <td colspan="6"></td>
  </tr>
  <tr height="40">
  	<td  align="left" valign="middle" bgcolor="#E6E6E6"><em>&nbsp;&nbsp;</em>取车地点</td>
    <td colspan="3">
	    <em>&nbsp;</em>
	    <input placeholder="取车地点"  id="startpoint" name="order.startpoint" type="text" value="${startpoint!""}" required="" 
	    	   style="height:32px; line-height:32px" onpropertychange="search()" oninput="search()" >
	    <div style="display:none" id="bmapcontainer"></div>
	</td>
	<td colspan="2">
        <span class="input-group-btn">
                <button class="btn btn-default" type="button" id="btn-position" onclick="search()">定位</button>
        </span>
        <span class="input-group-btn">
                <button class="btn btn-default" type="button" id="btn-position" onclick="markBegin()">地图上选择定位点</button>
        </span>
    </td>
  </tr>
  <tr>
    <td width="17%" align="left"  valign="middle" bgcolor="#E6E6E6"><em>&nbsp;&nbsp;</em>取车电话</td>
    <td colspan="5">
         <#if telCallNumb ??>
				&nbsp;<input  id="clientPhone" name="clientPhone"  value="${telCallNumb}" type="text" required="" style="height:32px" line-height:32px; size="30" onchange="checkMobile(this.value);">
				<script> checkMobile("${telCallNumb}");</script>
		<#else>
				&nbsp;<input id="clientPhone" name="clientPhone"  value="" type="text" required="" style="height:32px; line-height:32px" size="30" onchange="checkMobile(this.value);">
		</#if>
        <input class="form-control" id="memberID" name="memberID"  value="0" type="hidden" >
        <span class="label label-info" style="padding-left:0px;margin-top:6px;font-size:14px;" id="membertype"></span>
    </td>
  </tr>
  <tr height="40">
    <td  align="left" valign="middle" bgcolor="#E6E6E6"><em>&nbsp;&nbsp;</em>取车联系人</td>
    <td colspan="5" >
    	&nbsp;<input id="clientName" name="clientName" type="text" value="" style="height:32px; line-height:32px">
    	<span class="label label-warning" style="padding-left:0px;margin-top:6px;font-size:14px;" id="clientVirtual">0元</span>
    </td>
  </tr>
  <tr height="40" >
	  <td bgcolor="#E6E6E6"><em>&nbsp;&nbsp;</em>取车时间</td>
	  <td colspan="3" align="left" valign="middle" >
	    <em>&nbsp;</em><input  id="pointTime" name="pointTime" type="text" value="${pointTime!""}" required="" size="20" style="width:160px;height:32px;line-height:32px" 
	    						onfocus="WdatePicker({dateFmt:'yyyy-MM-dd mm:ss',readOnly:true})">
	  </td>
	 <td bgcolor="#E6E6E6"><em>&nbsp;</em>人数</td>
	 <td colspan="4" align="left" valign="middle" >
		<div>
		    <input class="spinner" id="driverNum" name="driverNum" type="number" value="1" style="width:32px;height:32px;line-height:32px"/>
		</div>	
	 </td>
  </tr>
  <tr height="40">
    <td  colspan="6" align="right" id="todayordernums_div" style="display: none;">
		<em>&nbsp;&nbsp;</em>总下单量
		<label >
            <p class="form-control-static" id="allcount" width="100px">
            <#if member ??>
            <a target='_blank' href='/order/memberOrder/${member.id}'></a>
            <#else>
            &nbsp;
            </#if>
            
            </p>
		</label>
		<em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</em>取消
        <label>
           <p class="form-control-static" id="cancalcount" width="100px"></p>
        </label>	
		<em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</em>本月单量
    	<label>
			<p class="form-control-static" id="monthcount" width="100px">&nbsp;</p>
		</label><em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</em>
    </td>
  </tr>
  <tr height="20" bgcolor="#a6E3E6">
   <td colspan="6"></td>
  </tr>
  <tr height="40">
    <td align="left" valign="middle" bgcolor="#E6E6E6"><em>&nbsp;&nbsp;</em>还车目的地</td>
    <td colspan="3">
    	<em>&nbsp;</em>
    	<input placeholder=""  id="endpoint" name="endpoint" type="text" value="" 
    		   style="height:32px; line-height:32px" onpropertychange="searchEnd()" oninput="searchEnd()">
	</td>
	<td colspan="2">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button" id="btn-position" onclick="searchEnd()">定位</button>
        </span>
        <span class="input-group-btn">
            <button class="btn btn-default" type="button" id="btn-position" onclick="markEnd()">地图上选择定位点</button>
        </span>
    </td>
  </tr>
  <tr height="40">
    <td  align="left" valign="middle" bgcolor="#E6E6E6"><em>&nbsp;&nbsp;</em>还车联系人</td>
    <td colspan="5" >
    	&nbsp;<input id="receiveName" name="receiveName" type="text" value="" style="height:32px; line-height:32px">
    </td>
  </tr>
  <tr>
    <td width="17%" align="left"  valign="middle" bgcolor="#E6E6E6"><em>&nbsp;&nbsp;</em>还车电话</td>
    <td colspan="5">
        &nbsp;<input  id="receivePhone" name="receivePhone" value="" type="text" required="" style="height:32px" line-height:32px; size="30">
    </td>
  </tr>
  <tr height="20" bgcolor="#a6E3E6">
   <td colspan="6"></td>
  </tr>
  <tr height="40" >
    <td colspan="6" bgcolor="#E6E6E6" align="center" valign="middle"><br>
         <button type="button" id="submitBnt" name="submitBnt" class="btn btn-primary" onclick="createOrder()">保存订单</button>
         <button type="button" id="submitBnt" name="submitBnt" class="btn btn-primary" onclick="createOrder3()">员工抢单</button>
         <button type="button" id="submitBnt" name="submitBnt" class="btn btn-primary" onclick="createOrderSelf()">强制派单</button><br><br>
         <button type="button" class="btn btn-info" onclick="javascript:history.back();">返回</button>
    </td>
  </tr>
  <tr height="40">
    <td align="left" valign="middle" bgcolor="#E6E6E6"><em>&nbsp;&nbsp;</em>公里数</td>
    <td colspan="2">
       <div style="float:left">
	    	<input class="spinner" id="driverKm" name="driverKm" value="0" style="width:32px;height:32px;line-height:32px"/>
       </div>
    </td>

    <td bgcolor="#E6E6E6"><em>&nbsp;</em>公司定价</td>
    <td colspan="2">
		<input class="spinner" id="driverMoney" name="driverMoney" value="0" style="width:32px;height:32px;line-height:32px"/>
	</td>

  </tr>
  <tr height="40">
    <td align="left" valign="middle" bgcolor="#E6E6E6"><em>&nbsp;&nbsp;</em>订单来源</td>
    <td colspan="2">
		<#if session.myCompanyName ??>
		     <em>&nbsp;</em><input  id="fromSource" name="fromSource" type="text" value="<#if orderCompanyName?exists>${orderCompanyName}<#else>${session.myCompanyName}</#if>" readonly="true" style="width:200px;height:32px;line-height:32px">
		     <input  id="fromSourceValue" name="fromSourceValue"  value="<#if orderCompany?exists>${orderCompany}<#else>${session.company}</#if>" type="hidden" >
		<#else>
			 <em>&nbsp;</em><input  id="fromSource" name="fromSource" type="text" value="大拇指" readonly="true" style="width:200px;height:32px;line-height:32px">
					 <input  id="fromSourceValue" name="fromSourceValue"  value="10" type="hidden" >
		</#if>

    </td>

    <td bgcolor="#E6E6E6"><em>&nbsp;</em>派单范围</td>
    <td colspan="2">
		<input class="spinner" id="driverRateKm" name="driverRateKm" value="2" style="width:32px;height:32px;line-height:32px"/>
	</td>

  </tr>
  <tr height="40">
    <td align="left" valign="middle" bgcolor="#E6E6E6"><em>&nbsp;</em>选择优惠券</td>
    <td colspan="2">				            		
    	<em>&nbsp;</em>
    	<select name="coupon" id="coupon" style="height:36px">
		    <option value="">
		                   请选择优惠券
		    </option>
		</select>
	</td>
    <td bgcolor="#E6E6E6"><em>&nbsp;</em>券密码</td>
    <td colspan="2">
    	<em>&nbsp;</em><input id="couponPass" name="couponPass" type="text" value=""  style="height:32px;line-height:32px" >
    </td>
  </tr>
  <tr height="120">
    <td align="left" valign="middle" bgcolor="#E6E6E6"><em>&nbsp;&nbsp;</em>订单备注</td>
    <td colspan="5">
		<em>&nbsp;</em><textarea  cols="20" id="memo" name="memo" rows="2" style="width:400px;height:80px;line-height:32px"></textarea>
    </td>
  </tr>
  </tr>
  <tr height="20" bgcolor="#a6E3E6">
      <td colspan="6"></td>
  </tr>
</table>
</form>
 
</td>

</tr>
</table>
<style>
	.tangram-suggestion{border:1px #f5f5f5 solid;background:#fff;line-height:24px;text-indent:12px;padding:0 10px;z-index:1000;}
	.tangram-suggestion-current{background:#3acf87;color:#fff;}
</style>
 <script>
   $('.spinner').spinner();
   $("#driverRateKm").val(2);
   $("#driverKm").val(0);
   $("#driverMoney").val(0);
   
   loadProvince();
   
   function createOrder3(){
 	  $('#form1').attr("action", "/order/save3").submit();
   }
   
   function createOrderSelf(){
 	  $('#form1').attr("action", "/order/save4").submit();
   }
   function createOrder(){
 	  $('#form1').attr("action", "/order/save5").submit();
   }
   
</script>
<script type="text/javascript" src="/js/map-adress.js"></script>
<script type="text/javascript" src="/js/wdatePicker/WdatePicker.js"></script>

</@layoutWithOutDocType>